function loadData(pageIndex,pageSize){ 
      ajax.get(`/bookstore/admin/book/page.do?pageIndex=${pageIndex}&pageSize=${pageSize}`, function (data) {
      let result = JSON.parse(data);
      let datas = result.data.data;

      let bookListNode = document.querySelector("#book-list");
      let bookFragment = document.createDocumentFragment();
      bookListNode.innerHTML='';

      datas.forEach((book) => {
        let bookHTML = `<!-- 一条查询消息-->
                                <div class="row mb-0 mt-3">
                                  <div class="col-auto text-center">
                                    <img src="/img/book/${book.pic}" width="100px" height="100px" alt="...">
                                  </div>
                                  <div class="col-3">
                                    <p class="my-0" style="font-weight: bold">${book.title}</p>
                                    <small class="text-muted">${book.isbn}</small> <br>
                                    <span >${book.author}</span> <br>
                                    <span >${book.publisher}</span> <br>
                                    <span class="text-danger">￥${book.price} <small class="text-muted">${book.pubdate}</small> </span>
                                  </div>
                                  <div class="col-6 px-0" style="text-align: justify">
                                      ${book.content}
                                  </div>
                                  <div class="col-auto d-flex align-items-center justify-content-center">
                                    <button type="button" class="btn btn-outline-danger">修改</button>
                                    <button type="button" class="btn btn-outline-success">下架</button>
                                  </div>
                                </div>
                          <!-- 一条查询消息 end--> `;
        let bookNode = document.createRange().createContextualFragment(bookHTML);
        bookListNode.append(bookNode);
      });

      let paginationLiNode = document.querySelector("#pagination-li");
      let pageIndex = result.data.pageIndex;
      let pageCount = result.data.pageCount;
      paginationLiNode.innerHTML='';
      let addLiNode=function(star,end,pageIndex){
        for (let i = star; i <= end; i++) {
          let li;
          if (i == pageIndex) {
            li = `<li class="page-item active "><a class="page-link" href="javascript:void(0);" onclick="changePage(${i})">${i}</a></li>`;
          } else {
            li = `<li class="page-item "><a class="page-link" href="javascript:void(0);" onclick="changePage(${i})">${i}</a></li>`;
          }
          let liNode = document.createRange().createContextualFragment(li);
          paginationLiNode.append(liNode);
        }
      }


      if (pageIndex <= 5) {
        addLiNode(1,10,pageIndex);
        let liNext = ` <li class="page-item">
                          <a class="page-link" href="javascript:void(0);" onclick="changePage(${pageIndex+1})" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                          </a>
                        </li>`;
        let liNode = document.createRange().createContextualFragment(liNext);
        paginationLiNode.append(liNode);
      }
      if (pageIndex > 5 && pageIndex + 5 <= pageCount) {
        let liPrev = `<li class="page-item" >
                        <a class="page-link" href="javascript:void(0);" onclick="changePage(${pageIndex-1})" aria-label="Previous">
                          <span aria-hidden="true">&laquo;</span>
                        </a>
                      </li>`;
        let liPrevNode = document.createRange().createContextualFragment(liPrev);
        paginationLiNode.append(liPrevNode);

        addLiNode(pageIndex - 4,pageIndex + 5,pageIndex);
        // for (let i = pageIndex - 4; i <= pageIndex + 5; i++) {
        //   let li;
        //   if (i == pageIndex) {
        //     li = `<li class="page-item active "><a class="page-link" href="#">${i}</a></li>`;

        //   } else {
        //     li = `<li class="page-item "><a class="page-link" href="#">${i}</a></li>`;
        //   }
        //   let liNode = document.createRange().createContextualFragment(li);
        //   paginationLiNode.append(liNode);
        // }
        let liNext = ` <li class="page-item">
                          <a class="page-link" href="javascript:void(0);" onclick="changePage(${pageIndex+1})" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                          </a>
                        </li>`;
        let liNextNode = document.createRange().createContextualFragment(liNext);
        paginationLiNode.append(liNextNode);
      }
      
      if (pageIndex + 5 > pageCount) {
        let liPrev = `<li class="page-item">
                        <a class="page-link" href="javascript:void(0);" onclick="changePage(${pageIndex-1})" aria-label="Previous">
                          <span aria-hidden="true">&laquo;</span>
                        </a>
                      </li>`;
        let liPrevNode = document.createRange().createContextualFragment(liPrev);
        paginationLiNode.append(liPrevNode);
        addLiNode( pageCount - 10,pageCount,pageIndex);
        // for (let i = pageCount - 10; i <= pageCount; i++) {
        //   let li;
        //   if (i == pageIndex) {
        //     li = `<li class="page-item active "><a class="page-link" href="#">${i}</a></li>`;

        //   } else {
        //     li = `<li class="page-item "><a class="page-link" href="#">${i}</a></li>`;
        //   }
        //   let liNode = document.createRange().createContextualFragment(li);
        //   paginationLiNode.append(liNode);
        // }
      }
     });
  }